<template>
  <div>
    <div class="containers">
      <div style="margin: 20px 10px">
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item>您的位置</el-breadcrumb-item>
          <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item>所有资讯</el-breadcrumb-item>
        </el-breadcrumb>
      </div>

      <div id="wrap">
        <div class="layout clearfix">
          <div class="h5_left">
            <!-- 标签栏 -->
            <div class="news_ad1">
              <img
                src="http://app003.bacms.cn/template/pcmoban/images/pad.jpg"
              />
            </div>
            <my-infor
              v-for="(item, i) in deta"
              :key="i"
              :avatar="item.pic"
              :title="item.title"
              :time="item.time"
              :deta="item.deta"
            ></my-infor>

            <el-pagination
              style="display: flex; justify-content: center; padding: 20px 0"
              background
              layout="prev, pager, next"
              :total="inforData.total"
              :current-page="inforData.page"
              :page-size="inforData.pagesize"
              @current-change="paegChange"
            >
            </el-pagination>
          </div>

          <div class="h5_right">
            <!--热门新闻 -->
            <div class="hot_news_list h5_r_bg">
              <div class="h5_tit">
                <p>热门资讯</p>
              </div>
              <ul id="box2">
                <li>
                  <a title=" 口袋魔法精灵：如何玩转地图漫游" target="_blank">
                    口袋魔法精灵：如何玩转地图漫游</a
                  >
                </li>
                <li>
                  <a title="三生三世十里桃花" target="_blank"
                    >三生三世十里桃花</a
                  >
                </li>
                <li>
                  <a
                    title="侍魂胧月传说：4月24日停机维护更新预告"
                    target="_blank"
                    >侍魂胧月传说：4月24日停机维护更新预告</a
                  >
                </li>
                <li>
                  <a
                    title="镇魂街联动来袭！ 《神都夜行录》半周年庆·第二期震撼上线！"
                    target="_blank"
                    >镇魂街联动来袭！ 《神都夜行录》半周年庆·第二期震撼上线！</a
                  >
                </li>
                <li>
                  <a
                    title="倩女幽魂：全职业换新升级 因美闪耀视频介绍"
                    target="_blank"
                    >倩女幽魂：全职业换新升级 因美闪耀视频介绍</a
                  >
                </li>
                <li>
                  <a
                    title="《和平精英》最占背包容量的几个道具，你还在傻傻的背着吗"
                    target="_blank"
                    >《和平精英》最占背包容量的几个道具，你还在傻傻的背着吗</a
                  >
                </li>
                <li>
                  <a
                    title="求生者双排组合推荐----人格研究院44视频"
                    target="_blank"
                    >求生者双排组合推荐----人格研究院44视频</a
                  >
                </li>
                <li>
                  <a
                    title="《和平精英》高端局应该如何进行枪械的搭配选择及使用技巧"
                    target="_blank"
                    >《和平精英》高端局应该如何进行枪械的搭配选择及使用技巧</a
                  >
                </li>
                <li>
                  <a title="大唐无双：纯暴灵宿天梯，分享技巧" target="_blank"
                    >大唐无双：纯暴灵宿天梯，分享技巧</a
                  >
                </li>
                <li>
                  <a
                    title="致·非遗 敬·匠心 《完美世界》手游携手潍坊国际风筝会打造空中盛宴"
                    target="_blank"
                    >致·非遗 敬·匠心
                    《完美世界》手游携手潍坊国际风筝会打造空中盛宴</a
                  >
                </li>
              </ul>
            </div>
            <!--热门游戏 -->
            <div class="subject_h_g h5_r_bg">
              <div class="h5_tit">
                <p>热门游戏</p>
              </div>
              <ul id="box3">
                <li class="hover">
                  <div class="p1">
                    <a title="九州飞凰录（新）" target="_blank">
                      <img
                        src="	http://app003.bacms.cn/upload/gmlogo/20191230102810.png"
                        alt="九州飞凰录（新）"
                    /></a>
                  </div>
                  <div class="p2">
                    <p>
                      <a title="九州飞凰录（新）" target="_blank"
                        >九州飞凰录（新）</a
                      >
                    </p>
                    <span>角色</span>
                    <em>人气：<i>36180</i></em>
                  </div>
                  <div class="p3">
                    <a target="_blank">下载</a>
                  </div>
                </li>

                <li class="hover">
                  <div class="p1">
                    <a title="逍遥春秋" target="_blank">
                      <img
                        src="http://app003.bacms.cn/upload/gmlogo/20200105054736.png"
                        alt="逍遥春秋"
                    /></a>
                  </div>
                  <div class="p2">
                    <p>
                      <a title="逍遥春秋" target="_blank">逍遥春秋</a>
                    </p>
                    <span>角色</span>
                    <em>人气：<i>12836</i></em>
                  </div>
                  <div class="p3">
                    <a target="_blank">下载</a>
                  </div>
                </li>
              </ul>
            </div>

            <!--热门新闻 -->
            <div class="hot_news_list h5_r_bg">
              <div class="h5_tit">
                <p>热门攻略</p>
              </div>
              <ul id="box4">
                <li>
                  <a title=" 口袋魔法精灵：如何玩转地图漫游" target="_blank">
                    口袋魔法精灵：如何玩转地图漫游</a
                  >
                </li>

                <li>
                  <a title="倩女幽魂：萌娃相伴暖心上线" target="_blank"
                    >倩女幽魂：萌娃相伴暖心上线</a
                  >
                </li>

                <li>
                  <a title="《口袋魔法精灵》主宠强化攻略" target="_blank"
                    >《口袋魔法精灵》主宠强化攻略</a
                  >
                </li>

                <li>
                  <a
                    title="《女神异闻录》全球销量超240万 平冈直人盛赞Switch有魅力"
                    target="_blank"
                    >《女神异闻录》全球销量超240万 平冈直人盛赞Switch有魅力</a
                  >
                </li>

                <li>
                  <a
                    title="《王者荣耀》2018年KPL秋季赛常规赛程公布 最新赛事时间表一览"
                    target="_blank"
                    >《王者荣耀》2018年KPL秋季赛常规赛程公布
                    最新赛事时间表一览</a
                  >
                </li>

                <li>
                  <a title="完美世界：【每日问答】每日答题大全" target="_blank"
                    >完美世界：【每日问答】每日答题大全</a
                  >
                </li>

                <li>
                  <a title="火影：忍界究极对决阵容推荐" target="_blank"
                    >火影：忍界究极对决阵容推荐</a
                  >
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import MyInfor from "@/components/MyInfor.vue";
export default {
  components: { MyInfor },
  data() {
    return {
      activeName: "infor",
      deta: [],
      inforData: {
        //绑定当前页面中显示的列表数据
        page: 1,
        pagesize: 5,
        total: 40,
      },
    };
  },
  mounted() {
    let params = { page: 1, pagesize: this.inforData.pagesize };
    this.$http.detaApi.list(params).then((res) => {
      console.log(res);
      this.deta = res.data.data;
    });
  },

  methods: {
    paegChange(page) {
      console.log(page);
      let params = { page, pagesize: this.inforData.pagesize };
      this.$http.detaApi.list(params).then((res) => {
        console.log(res);
        this.deta = res.data.data;
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.containers {
  width: 1200px;
  margin: 0 auto;
}
.layout {
  display: flex;
  margin: 20px 0;
}
.h5_left {
  float: left;
  border: 1px solid #f3f3f3;
}
.h5_right {
  width: 282px;
  border: 1px solid #f3f3f3;
  padding: 0 20px;
  margin-left: 30px;
}
.h5_r_bg {
  background: #fff;
  width: 262px;
  padding: 5px 10px;
  float: left;
}

.news_pic dd .p2 span a:hover,
.hot_news_list li a:hover,
.n_d_t_center p a:hover,
.n_d_t_center span a:hover,
.about_article li a:hover {
  color: #ff6200;
}

.hot_news_list ul,
.about_article ul {
  width: 100%;
  float: left;
  padding: 10px 0;
}
.hot_news_list li {
  width: 92%;
  float: left;
  line-height: 35px;
  height: 35px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  padding-left: 12px;
}

/*页码*/
.newyiiPager {
  width: 100%;
  float: left;
  text-align: center;
  padding: 20px 0;
  font-size: 14px;
  color: #515151;
}

ul.yiiPager li {
  display: inline;
  margin-left: 5px;
  vertical-align: middle;
}

ul.yiiPager a:link,
ul.yiiPager a:visited {
  padding: 0px 12px;
  border: solid 1px #dedede;
  text-decoration: none;
  display: inline-block;
  line-height: 30px;
  color: #515151;
}

.h5_tit {
  width: 100%;
  float: left;
  border-bottom: 1px solid #dcdcdc;
  height: 40px;
  line-height: 40px;
}
.h5_tit p {
  float: left;
  font-size: 22px;
  color: #3a3a3a;
  border-bottom: 3px solid #0685f6;
  line-height: 38px;
  padding: 0 3px;
}
.h5_tit a {
  float: right;
  color: #545454;
  padding-right: 10px;
  margin-right: 10px;
  display: inline;
}
.h5_tit a:hover {
  color: #ff6200;
}

.subject_h_g li {
  float: left;
  width: 100%;
  color: #6c6c6c;
  margin-top: 8px;
}
.subject_h_g li .p1 {
  width: 60px;
  float: left;
  margin-top: 3px;
  display: none;
}
.subject_h_g li .p1 img {
  width: 60px;
  height: 60px;
  display: block;
}
.subject_h_g li .p2 {
  width: 100%;
  float: left;
}
.subject_h_g li .p2 p {
  width: 60%;
  float: left;
  line-height: 25px;
  height: 25px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.subject_h_g li .p2 p a {
  font-size: 14px;
  color: #333;
  float: left;
  padding-left: 15px;
}
.subject_h_g li .p2 span {
  width: 69px;
  height: 20px;
  overflow: hidden;
  float: right;
  text-align: right;
  line-height: 25px;
}

.subject_h_g li .p2 p a:hover,
.subject_h_g li .p2 span a:hover {
  color: #ff6200;
}
.subject_h_g li .p2 em {
  width: 100%;
  float: left;
  color: #999999;
  display: none;
  font-weight: normal;
}
.subject_h_g li .p2 i {
  color: #ff0000;
}

.subject_h_g li .p3 a {
  width: 45px;
  line-height: 25px;
  text-align: center;
  float: right;
  color: #099cda;
  background: #fff;
  font-size: 12px;
  margin-top: 19px;
  border: 1px solid #099cda;
}

.subject_h_g li.hover {
  border-bottom: 1px dashed #e8e8e8;
  padding-bottom: 10px;
}
.subject_h_g li.hover .p1,
.subject_h_g li.hover .p2 em,
.subject_h_g li.hover .p3 {
  display: block;
}
.subject_h_g li.hover .p2 {
  width: 45%;
  margin-left: 10px;
  display: inline;
}

.subject_h_g li.hover .p2 p a {
  background: none;
  padding-left: 0;
  font-weight: bold;
}
.subject_h_g li.hover .p2 span {
  width: 100%;
  text-align: left;
  line-height: 20px;
}
</style>
